<template>
	<view :class="[bg]">
		<uni-drawer ref="drawerTypeRef" :width="300" mode="right" :mask-click="true">
			<view class="navbar-block"></view>
			<view class="type-title">{{state.drawerType == 1 ? '全部车型' : '选择颜色'}}</view>
			
			<view v-if="state.drawerType == 1">
				<view class="type-content-title">全部车型</view>
				
				<view class="car-content">
					<view class="car-title">2023款</view>
					<view class="car-item" @click="selectCar()">
						<view class="car-name">100kWh 签名版</view>
						<view class="ss-flex ss-row-between ss-m-t-5">
							<view class="price">50.6万</view>
							<view class="num">60张</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="state.drawerType == 2">
				<view class="type-content-title">全部颜色</view>
				
				<view class="car-content">
					<view class="car-title">2023款</view>
					<view class="car-item" @click="selectCar()">
						<view class="ss-flex ss-m-t-5">
							<view class="tag-color">
								<view class="line" v-for="color in ['#000000', '#F2D4B0']" :style="{backgroundColor: color}"></view>
							</view>
							<view class="tag-name">极光绿</view>
							<view class="num">(60张)</view>
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	
	const props = defineProps({
		bg: {
		  type: String,
		  default: '',
		},
	})
	
	const state = reactive({
		// 选择车型抽屉
		drawerType: 1,
		colorType: '全部颜色',
	})
	
	// 选择车辆
	const drawerTypeRef = ref(null)
	function showDrawerType(val) {
		state.drawerType = val
		drawerTypeRef.value.open();
	}
	function closeDrawerType() {
		drawerTypeRef.value.close();
	}
	
	defineExpose({
		showDrawerType,
		closeDrawerType
	})
	
	const emits = defineEmits(['select'])
	function selectCar(item) {
		closeDrawerType()
		emits('select', {type: state.drawerType, item: {}})
	}
</script>

<style lang="scss" scoped>
	.bg-black {
		background-color: #232323 !important;
		
		:deep() {
			.uni-drawer__content {
				background-color: #232323
			}
		}
		
		.type-title {
			border-color: #191919;
		}
		.car-title {
			background-color: #191919 !important;
		}
	}
	.navbar-block {
		height: 44px;
	}
	.type-title {
		padding: 20rpx 0;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
		border-bottom: 10px solid #f4f4f8;
	}
	
	.type-content-title {
		padding: 20rpx;
	}
	
	.car-content {
		.car-title {
			padding: 10rpx 20rpx;
			font-size: 28rpx;
			color: #777;
			background-color: #f4f4f8;
		}
		
		.car-item {
			padding: 10rpx 20rpx;
			
			.tag-color {
				width: 30rpx;
				height: 30rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				
				.line {
					width: 30rpx;
					height: 15rpx;
				}
			}
			.tag-name {
				font-size: 30rpx;
			}
			.car-name {
				font-size: 28rpx;
			}
			.price {
				font-size: 24rpx;
				color: #f24e4e;
			}
			.num {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>